<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新增常用旅客</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <link rel="stylesheet" href="statics/css/add_travelers.css">
</head>
<body>
<div class="add-traveler-page">
    <div class="page-header">
        <h3>新增常用旅客</h3>
    </div>

    <form id="travelerForm" class="page-body">
        <div class="notice">注：中文名与英文名两者必填一项，且与所选证件上的姓名一致</div>

        <div class="form-group">
            <label>中文姓名</label>
            <input type="text" class="form-input" name="chineseName">
            <div class="error-message"></div>
        </div>

        <div class="form-group">
            <label>英文姓名</label>
            <div class="eng-name-inputs">
                <input type="text" class="form-input" name="surname" placeholder="姓(Surname)">
                <input type="text" class="form-input" name="givenName" placeholder="名(Given name)">
            </div>
            <div class="error-message"></div>
        </div>

        <div class="form-group">
            <label>性别</label>
            <div class="radio-group">
                <label class="radio-label">
                    <input type="radio" name="gender" value="男" checked>
                    <span>男</span>
                </label>
                <label class="radio-label">
                    <input type="radio" name="gender" value="女">
                    <span>女</span>
                </label>
            </div>
        </div>

        <div class="form-group">
            <label>国籍</label>
            <input type="text" class="form-input" name="nationality">
        </div>

        <div class="form-group">
            <label>出生日期</label>
            <div class="date-select">
                <select class="year-select" name="birthYear"></select>
                <select class="month-select" name="birthMonth"></select>
                <select class="day-select" name="birthDay"></select>
            </div>
        </div>

        <div class="form-group">
            <label>手机号码</label>
            <input type="text" class="form-input" name="phone">
        </div>

        <div class="form-group">
            <label>邮箱</label>
            <input type="email" class="form-input" name="email">
            <span class="input-tip">建议设填写电话和邮箱，便于您的朋友获得订单相关信息</span>
        </div>

        <div class="form-group">
            <label>证件类型</label>
            <div class="checkbox-group" id="idTypeGroup">
                <label class="checkbox-label select-all">
                    <input type="checkbox" id="selectAll">
                    <span>全选</span>
                </label>
                <label class="checkbox-label">
                    <input type="checkbox" name="idType" value="身份证">
                    <span>身份证</span>
                </label>
                <label class="checkbox-label">
                    <input type="checkbox" name="idType" value="护照">
                    <span>护照</span>
                </label>
                <label class="checkbox-label">
                    <input type="checkbox" name="idType" value="驾照">
                    <span>驾照</span>
                </label>
                <label class="checkbox-label">
                    <input type="checkbox" name="idType" value="军人证">
                    <span>军人证</span>
                </label>
                <label class="checkbox-label">
                    <input type="checkbox" name="idType" value="回乡证">
                    <span>回乡证</span>
                </label>
                <label class="checkbox-label">
                    <input type="checkbox" name="idType" value="港澳通行证">
                    <span>港澳通行证</span>
                </label>
                <label class="checkbox-label">
                    <input type="checkbox" name="idType" value="台胞证">
                    <span>台胞证</span>
                </label>
                <label class="checkbox-label">
                    <input type="checkbox" name="idType" value="台湾通行证">
                    <span>台湾通行证</span>
                </label>
                <label class="checkbox-label">
                    <input type="checkbox" name="idType" value="国际海员证">
                    <span>国际海员证</span>
                </label>
                <label class="checkbox-label">
                    <input type="checkbox" name="idType" value="其他">
                    <span>其他</span>
                </label>
            </div>
            <div class="error-message"></div>
        </div>

        <!-- 证件号码输入区域 -->
        <div id="idNumberForms"></div>

        <div class="form-group">
            <label class="checkbox-label">
                <input type="checkbox" name="defaultTraveler">
                <span>设为默认旅客</span>
            </label>
        </div>
    </form>

    <div class="page-footer">
        <button class="save-btn" onclick="submitForm()">保存</button>
        <button class="cancel-btn" onclick="history.back()">返回</button>
    </div>
</div>
<script src="statics/js/add_travelers.js"></script>
</body>
</html>